<template>
	<main class="cart_box">
		<div class="cart_tip clearfix">
			<span>登录后可同步电脑与手机购物车中的商品</span>
			<a href="#" class="login">登录</a>
		</div>
		<div class="cart_content clearfix" v-for="item in cartDatas">
			<div class="cart_shop clearfix">
				<!--<div class="cart_check_box">
					<div @click="checkShop(item)" class="check_box" :checked="item.checkeds">

					</div>
				</div>-->
				<div class="shop_info clearfix">
					<img src="../assets/images/buy-logo.png" alt="" class="shop_icon">
					<span class="shop_name">{{item.shop_name}}</span>
				</div>
				<div class="cart_free clearfix">
					<span class="free_tip">优惠券></span>
				</div>
			</div>
			<div class="cart_item">
				<div class="cart_item_box">
					<div @click="CheckedItem(item)" class="check_box" :checked="item.checkedi">

					</div>
				</div>
				<div class="cart_detial_box clearfix">
					<a href="#" class="cart_product_link">
						<img v-lazy="item.product_img_url" alt="">
					</a>
					<div class="item_names">
						<a href="#">
							<span>{{item.product_name}}</span>
						</a>
					</div>
					<div class="cart_weight">
						<i class="my_weigth">重量:0.45kg</i>
						<span class="my_color">颜色:AT800/16</span>
					</div>
					<div class="cart_product_sell">
						<span class="product_money">￥<strong class="real_money">{{item.product_uprice}}</strong>.00</span>
						<div class="cart_add clearfix">
							<span class="my_add" @click="AddNum(item)">+</span>
							<input @change="InputChange(item)" type="number" class="my_count" v-model="item.goods_num">
							<span class="my_jian" @click="ReduceNum(item)">-</span>
						</div>
					</div>
					<div @click="DelItem(item)" class="cart_del clearfix">
						<div class="del_top">
						</div>
						<div class="del_bottom">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="cart_fo">
			<footer class="cart_footer">
				<div class="all_check_box">
					<div class="check_box" @click="CheckAll" :checked="checkAll">

					</div>
					<span>全选</span>
				</div>
				<div class="count_money_box">
					<div class="heji">
						<strong>合计:</strong>
						<strong>￥</strong>
						<strong>{{totalPrice.toFixed(2)}}</strong>
					</div>
					<div class="total_money clearfix">
						<span>总额:</span>
						<i>￥</i>
						<span>500.00</span>
						<span>立减:</span>
						<i>￥</i>
						<span>50.00</span>
					</div>>
					<a href="#" class="go_pay">
						<span>去计算(1)</span>
					</a>
				</div>
			</footer>
		</div>
		<mt-popup v-model="popupVisible" position="bottom"  popup-transition="popup-fade">
			<div class="pop">
				<div class="pop_box">
					<div class="del_info">
						确定要删除该商品吗？
					</div>
					<div @click="popupVisible=false" class="del_cancel">
						取消
					</div>
					<div class="del_ok">
						确定
					</div>
				</div>
			</div>
		</mt-popup>

	</main>

</template>
<script>
	export default {
		created() {
			this.getCartDatas()

		},
		data() {
			return {
				cartDatas: [],
				checkAll: false,
				totalPrice: 0.00,
				popupVisible: false,
			}
		},
		mounted() {

		},
		methods: {
			getCartDatas() {
				let _this = this;
				_this.$http.get('/cart').then((res) => {
					console.log('res', res)
					_this.cartDatas = res.data;
					for(var i = 0; i < _this.cartDatas.length; i++) {
						_this.$set(_this.cartDatas[i], 'checkedi', false)
					}
				}, (err) => {
					console.log(err);
				})
			},
			CheckAll() {
				for(var i = 0; i < this.cartDatas.length; i++) {
					this.cartDatas[i].checkedi = !this.checkAll
				}
			},
			ReduceNum(item) {
				if(item.goods_num <= 1) {
					return false;
				}
				item.goods_num--
			},

			CheckedItem(item) {
				item.checkedi = !item.checkedi
			},
			AddNum(item) {
				item.goods_num++
			},
			InputChange(item) {
				console.log(item)
			},
			DelItem(item) {
				this.popupVisible = true
			}
		},
		watch: {
			cartDatas: {
				handler: function(nVal, oVal) {
					var _this = this
					_this.totalPrice = 0
					this.checkAll = nVal.every(function(arr) {
						return arr.checkedi
					})
					for(var i = 0; i < nVal.length; i++) {
						if(nVal[i].checkedi) {
							_this.totalPrice += nVal[i].product_uprice * nVal[i].goods_num;
						}
					}
				},
				deep: true
			}
		}
	}
</script>